<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wicked Forms :: Showcase :: Wicket 6.x</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="wicked charts">
<meta name="keywords" content="wicked forms,wicket,dynamic forms">
<meta name="author" content="Matthias Balke, Tom Hombergs">

<!-- Le styles -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
	padding-top: 40px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

.modal {
	width: 800px;
	left: 44%;
	top: 36%;
}

.modal-body {
	max-height: 560px;
}

.modal.fade.in {
	top: 36%;
}
</style>
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/wickedforms.css" rel="stylesheet">
<!--[if gte IE 9]>
	  <style type="text/css">
	    .gradient {
	       filter: none;
	    }
	  </style>
	<![endif]-->
<link href="css/syntaxhighlighter/shCoreEclipse.css" rel="stylesheet"
	type="text/css">
<link href="css/syntaxhighlighter/shThemeEclipse.css" rel="stylesheet"
	type="text/css">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> </a> <a
					class="brand" href="./">Wicked Forms</a>
				<wicket:link>
					<div class="nav-collapse collapse">
						<ul class="nav">
							<li><a href="http://code.google.com/p/wicked-forms/">GoogleCode</a>
							</li>
						</ul>
					</div>
				</wicket:link>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div id="bannerContainer" class="gradient">
		<div class="row-fluid">
			<div class="span12 grid">
				<div id="banner">
					<h1>Wicked Forms</h1>
					<p>version ${project.version} :: Wicket ${wicket.version}</p>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<br>
		<div class="row-fluid">
			<div class="span3">
				<div class="well sidebar-nav">

					<wicket:link>
						<ul class="nav nav-list">

							<li class="nav-header">Basic Concepts</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/generalusage/UsagePage.html">Usage</a>
							</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/generalusage/BindingsPage.html">Binding
									Input Values</a>
							</li>

							<li class="nav-header">Form Elements</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/formelements/SectionPage.html">Section</a>
							</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/formelements/TextPage.html">Plain
									Text</a></li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/formelements/TextFieldPage.html">Text
									Field</a>
							</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/formelements/TextAreaPage.html">Text
									Area</a>
							</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/formelements/DropDownPage.html">Drop
									Down List</a>
							</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/formelements/CheckboxPage.html">Checkbox</a>
							</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/formelements/RadioGroupPage.html">Radio
									Group</a></li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/formelements/CheckboxGroupPage.html">Checkbox
									Group</a></li>

							<li class="nav-header">Form Element Metadata</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/metadata/LabelPage.html">Label</a>
							</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/metadata/UserHintPage.html">User
									Hints</a>
							</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/metadata/DisabledPage.html">Disabled</a>
							</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/metadata/RequiredPage.html">Required</a>
							</li>

							<li class="nav-header">Validators</li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/validators/MinMaxValidatorPage.html">Min/Max
									Validator</a></li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/validators/UrlValidatorPage.html">URL
									Validator</a></li>
							<li><a
								href="/com/googlecode/wickedforms/showcase/validators/CustomValidatorPage.html">Custom
									Validator</a></li>

							<li class="nav-header">Advanced Features</li>
							<li><a href="/com/googlecode/wickedforms/showcase/advanced/AddSectionButtonPage.html">Button
									for Adding a Section</a>
							</li>
							<li><a href="/com/googlecode/wickedforms/showcase/advanced/ConditionalVisibilityPage.html">Toggling Visibility</a>
							</li>
							<li><a href="/com/googlecode/wickedforms/showcase/advanced/ConditionalEnablingPage.html">Toggling Enabled State</a>
							</li>
							
							<li class="nav-header">Customizing</li>
							<li class="disabled"><a onclick="return false" href="#">Creating a Custom Form Element Type</a>
							</li>
							<li class="disabled"><a onclick="return false" href="#">Overriding
									the Default CSS Design</a>
							</li>
							<li class="disabled"><a onclick="return false" href="#">Predefined CSS Themes</a>
							</li>

							<li class="nav-header">Form Examples</li>
							<li class="disabled"><a onclick="return false" href="#">Simple
									Data Form</a>
							</li>
							<li class="disabled"><a onclick="return false" href="#">Questionnaire</a>
							</li>

							<li class="nav-header">CRUD Forms for JPA Entities</li>

							<li class="nav-header">Wizards</li>
						</ul>
					</wicket:link>
				</div>
				<!--/.well -->
			</div>
			<!--/span-->

			<div class="span9 corner">

				<p wicket:id="showCodeButtonContainer">
					<a id="showCodeButton" class="btn btn-primary pull-right" href="#"
						data-toggle="modal" data-target="#codeDialog">Show Java code
						&raquo;</a>
				</p>

				<div wicket:id="contentPanel">CONTENT</div>

			</div>

		</div>

		<div class="span9">
			<div id="codeDialog" class="modal hide fade" tabindex="-1"
				role="dialog" aria-labelledby="codeDialogHeader" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h3 id="codeDialogHeader">Java code for creating this form:</h3>
				</div>
				<div class="modal-body">
					<pre wicket:id="codeContainer" class="brush: java">Here comes the code</pre>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>

		<wicket:fragment wicket:id="USAGE">
			<h2>General Usage</h2>
			<p>To add a dynamic form to your Wicket application simply create
				an object of type FormModel and configure it by adding input fields,
				validators, hint texts and so on in pure Java. Just follow these
				steps:</p>

			<h3>Create your FormModel object:</h3>
			<p>You define the structure and contents of your form dynamically
				at runtime by creating an object of type FormModel. Follow the links
				in the navigation menu for examples. Each example provides a "Show
				Java Code" Button that diplays the source code. The following
				example creates a form with a section containing a single text
				field:</p>

			<blockquote>
				<pre class="brush: java">
FormModel myForm = new FormModel("Form Title");
myForm.add(new SectionModel("Section Title")
  .add(new TextFieldModel&lt;String&gt;("Text Field Label", String.class)));
</pre>
			</blockquote>

			<h3>Add the Form to the HTML Markup:</h3>
			<p>To include the form in you page, add a div (or any other
				container tag) to your HTML markup and provide a wicket:id. If you
				know Wicket, this is nothing new.</p>
			<blockquote>
				<pre class="brush: xml">
&lt;div wicket:id="myForm"/&gt;
</pre>
			</blockquote>

			<h3>Add the Form to the Wicket Page:</h3>
			<p>Wicked Forms provides the FormPanel class that can be added to
				the Java class of a Wicket page like this (again, if you know
				Wicket, this should be familiar):</p>
			<blockquote>
				<pre class="brush: java">
add(new FormPanel("myForm", myForm));
</pre>
			</blockquote>
			<p>That's it.</p>
		</wicket:fragment>

		<wicket:fragment wicket:id="BINDINGS">
			<h2>Bindings</h2>
			<p>Forms are useless if you cannot process the user's input.
				Thus, each form element can be bound to an arbitrary java object
				that stores the user's input. This concept is very similar to (and
				inspired by) Wicket's model concept, so if you know Wicket you will
				feel at home.</p>

			<h3>The Binding interface</h3>
			<p>The Binding interface is a simple interface that allows to get
				and set a value of a certain type. Very similar to Wicket's IModel
				interface. All form elements have a constructor that expects a
				Binding implementation as parameter. That Binding connects the user
				input to the Java object that backs the Binding.</p>

			<h3>SimpleBinding</h3>
			<p>The simplest possible implementation of the Binding interface
				is SimpleBinding. It is used implicitly if no Binding implementation
				is passed to a form element. You won't really need to use it.</p>

			<h3>PropertyBinding</h3>
			<p>A PropertyBinding binds the user input of a form element to an
				instance variable of a Java object. The following code binds the
				input of a text field to the "name" property of a Person object:</p>
			<blockquote>
				<pre class="brush: java">
Person person = new Person();
person.setName("Tom");				
Binding binding = new PropertyBinding(person, "name");				
StringTextFieldModel textField = new StringTextFieldModel("Label", binding)));
</pre>
			</blockquote>

			<h3>Custom Bindings</h3>
			<p>You are free to create your own implementations of the Binding
				interface that suite your project's needs. If you come up with
				implementations that may be of benefit to others, let us know and we
				will incorporate them into Wicket Forms :).</p>
		</wicket:fragment>

		<hr>

		<footer>
			<p>&copy; Wicked Forms 2013</p>
		</footer>

	</div>
	<!--/.fluid-container-->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/bootstrap-button.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/syntaxhighlighter/shCore.js"></script>
	<script src="js/syntaxhighlighter/shBrushJava.js"></script>
	<script src="js/syntaxhighlighter/shBrushXml.js"></script>
	<script src="js/wickedforms.js"></script>
</body>
</html>

